<template>
  <div class="card-cell" :class="{ 'primary-type': primary, 'large-size': size === 'large' }">
    <div class="cell-title"> {{ label }}： </div>
    <div class="cell-content">
      <span class="cell-value" :class="{ 'defaut-type': blackValue, 'is-link': showUnderLine }" @click="valueClick"
        >{{ formatValue }}{{ unit }}</span
      >
      <a-tooltip v-if="tooltipList">
        <icon-question-circle class="card-help-icon" />
        <template #content>
          <div v-for="(item, index) in tooltipList" :key="index">{{ item }}</div>
        </template>
      </a-tooltip>
      <slot> </slot>
    </div>
  </div>
</template>

<script setup name="CardCell">
  import { computed } from 'vue'
  import { formatNumber } from '@/utils/index'

  const props = defineProps({
    label: String,
    value: [String, Number],
    unit: {
      type: String,
      default: '元',
    },
    tooltip: String,
    linkValue: Boolean,
    // 加粗
    primary: Boolean,
    // 是否为黑色字体，默认蓝色
    blackValue: Boolean,
    size: {
      type: String,
      default: 'default', // default | large
    },
    // 是否阻止点击冒泡
    stopPropagation: Boolean,
  })
  const emits = defineEmits(['valueClick'])

  // 兼容数组
  const tooltipList = computed(() => {
    if (!props.tooltip) return ''
    if (typeof props.tooltip === 'string') {
      return [props.tooltip]
    } else if (Array.isArray(props.tooltip)) {
      if (props.tooltip.length == 0) return ''
      return props.tooltip
    }
    return ''
  })

  const formatValue = computed(() => {
    let val = Number(props.value) || 0
    if (props.unit != '元') return val
    return formatNumber(val, props.thousandth)
  })

  // 是否显示下划线
  const showUnderLine = computed(() => {
    let val = Number(props.value) || 0
    if (val == 0) {
      return false
    }
    return props.linkValue
  })

  const valueClick = (e) => {
    // 如果传入的 linkValue 为 true，需要阻止事件冒泡
    if (props.linkValue || props.stopPropagation) e.stopPropagation()
    if (showUnderLine.value) {
      emits('valueClick')
    }
  }
</script>

<style lang="less" scoped>
  .card-cell {
    display: flex;
    font-size: 14px;
    font-weight: 400;
    color: #1d2129;
    box-sizing: border-box;
    line-height: 20px;
    flex-wrap: wrap;

    &.primary-type {
      font-weight: bold;
    }
    &.large-size {
      font-size: 16px;
      line-height: 24px;

      & + & {
        margin-top: 4px;
      }
    }

    .card-title {
      flex-shrink: 0;
      white-space: nowrap;
    }

    .card-content {
      flex: 1;
      flex-shrink: 1;
      display: flex;
      word-break: break-all;
    }
    .cell-value {
      color: #1890ff;
      margin-right: 4px;
      &.defaut-type {
        color: #1d2129;
        cursor: auto;
      }
      &.is-link {
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
      }
      .help-icon {
        color: #1d2129;
        font-size: 14px;
      }
    }

    & + & {
      margin-top: 2px;
    }
  }
</style>
